<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>监控</title>

</head>
<body>
<div id="thing_overview_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>监控</h1>
        <a href="../form" data-icon="plus" data-transition="flip">添加</a>

        <div class="segmented-control ui-bar-c center">
            <div data-role="controlgroup" data-type="horizontal" style="margin: 0.2em;">
                <a href="?status=PENDING" data-role="button" data-ajax="false"
                   class="${thingMonitoringDto.pending?'ui-btn-active':''}">进行中<c:if
                        test="${thingMonitoringDto.pending}">(${thingMonitoringDto.totalSize})</c:if></a>
                <a href="?status=CREATED" data-role="button" data-ajax="false"
                   class="${thingMonitoringDto.created?'ui-btn-active':''}">新建<c:if
                        test="${thingMonitoringDto.created}">(${thingMonitoringDto.totalSize})</c:if></a>
            </div>
        </div>
    </div>
    <div data-role="content">
        <div class="center red" style="display: none;" id="action_info">操作成功!</div>
        <ul data-role="listview" id="thing_monitor_view" data-inset="true">
            <c:forEach items="${thingMonitoringDto.list}" var="t">
                <li ${t.showWarning?'data-theme="e"':''}>
                    <a href="action/${t.guid}">
                        <h3>${t.content} </h3>

                        <p>优先级: <strong class="${t.priorityCssStyle}">${t.priority.label}</strong></p>

                        <p>创建时间: ${t.createTime}
                            <c:if test="${not empty t.eventName}">
                                | 事件: ${t.eventName}
                            </c:if>
                        </p>

                        <p class="ui-li-aside">${t.startDate}</p>
                    </a>
                </li>
            </c:forEach>
            <c:if test="${empty thingMonitoringDto.list}">
                <li>
                    没有任何事情,去放松自己吧.
                </li>
            </c:if>
        </ul>
        <c:if test="${thingMonitoringDto.showMore}">
            <div data-role="controlgroup" id="monitoring_more_div">
                <a href="javascript:void(0);" id="monitoring_more_link" data-role="button" class="color-b">
                    更多 (<span
                        id="page_number">${thingMonitoringDto.pageNumber}</span>/${thingMonitoringDto.totalPages})<img
                        id="more_loading" src="${contextPath}/images/public/load.gif" alt="loading" class="more-img"/>
                </a>
            </div>
        </c:if>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="d">
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="../overview" data-icon="arrow-l" data-direction="reverse" data-transition="flip">返回</a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {
            <c:if test="${param.result}">
            $("#action_info").fadeIn(800).delay(800).fadeOut(800);
            </c:if>

            var pageNumber = ${thingMonitoringDto.pageNumber};
            var totalSize = ${thingMonitoringDto.totalSize};
            var status = '${thingMonitoringDto.status}';

            $("a#monitoring_more_link").bind("click", function() {
                var $this = $(this).addClass("gray");
                var nextPageNumber = (++pageNumber);
                var loading = $("#more_loading").show();
                getData();
                function getData() {
                    $.ajax({
                        url:"overview/more",
                        data:{
                            pageNumber: nextPageNumber,
                            status:status,
                            totalSize: totalSize
                        },
                        success:function(data) {
                            var listview = $("#thing_monitor_view").append($.trim(data)).listview("refresh");
                            $this.removeClass("gray");
                            checkShowMore(listview);
                        }
                    });
                }

                function checkShowMore(listview) {
                    var addedSize = listview.find("li").size();
                    if (addedSize == totalSize) {
                        $("#monitoring_more_div").hide();
                    } else {
                        loading.hide();
                    }
                    $this.find("#page_number").html(nextPageNumber);
                }
            });
        });
    </script>
</div>
</body>
</html>